import React, {Component} from 'react';
import {connect} from 'react-redux'
import '../../assets/scss/components/general/selectTags.scss'
import chroma from "chroma-js"
import Select from "react-select"
import {getTags, getTagsList} from "../../redux/actions/tags";
import {SET_ADD_EVENT_TAGS} from "../../redux/constants/eventDetail/tabInfo";

class SelectTags extends Component {
  requestParams = {
    includes: "",
    fields: "tags.name, tags.id, tags.color",
    orderBy: "created_at"
  }

  colourStyles = {
    control: styles => ({...styles, backgroundColor: "transparent"}),
    option: (styles, {data, isDisabled, isFocused, isSelected}) => {
      const color = chroma(data.color)
      return {
        ...styles,
        backgroundColor: isDisabled
          ? null
          : isSelected
            ? data.color
            : isFocused
              ? color.alpha(0.1).css()
              : null,
        color: isDisabled
          ? "#ccc"
          : isSelected
            ? chroma.contrast(color, "white") > 2
              ? "white"
              : "black"
            : data.color,
        cursor: isDisabled ? "not-allowed" : "default",

        ":active": {
          ...styles[":active"],
          backgroundColor:
            !isDisabled && (isSelected ? data.color : color.alpha(0.3).css())
        }
      }
    },
    multiValue: (styles, {data}) => {
      const color = chroma(data.color)
      return {
        ...styles,
        backgroundColor: color.alpha(0.1).css()
      }
    },
    multiValueLabel: (styles, {data}) => ({
      ...styles,
      color: data.color
    }),
    multiValueRemove: (styles, {data}) => ({
      ...styles,
      color: data.color,
      ":hover": {
        backgroundColor: data.color,
        color: "white"
      }
    })
  }

  onChange(e) {
    if (!e) {
      this.props.changeTags([])
      return
    }
    if (e.length > this.props.length) return;

    this.props.changeTags(e.map(el => {
      return {...el, id: el.value}
    }))
    let el = document.getElementsByClassName('select__value-container');
    el[0].scrollLeft = el[0].scrollWidth
  }

  constructor(props) {
    super(props);
    this.state = {}

  }

  componentDidMount() {
    this.props.getTagsList({...this.requestParams, type: this.props.type})
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    /*if (JSON.stringify(prevProps) !== JSON.stringify(prevState))
      this.props.getTagsList({...this.requestParams, type: this.props.type})
  */}


  render() {
    console.log(this.props.selected)
    return (
      <React.Fragment>
        <Select
          closeMenuOnSelect={false}
          options={this.props.tags && this.props.tags.data.map(elem => {
            return {
              ...elem,
              value: elem.id,
              label: elem.name,
            }
          })}
          value={this.props.selected && this.props.selected.map(elem => {
            return {
              ...elem,
              value: elem.id,
              label: elem.name,
            }
          })}
          isMulti
          styles={this.colourStyles}
          hideSelectedOptions={true}
          maxMenuHeight={120}
          placeholder={'Теги'}
          className={`dark_select__menu-list ${this.props.className}`}
          classNamePrefix="select"
          isSearchable={false}
          onChange={e => this.onChange(e)}
        />
      </React.Fragment>
    )
  }
}


export default connect(null, {getTagsList})(SelectTags)
